<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-12 23:51:10
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-17 22:37:54
-->
<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-12 23:42:17
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-12 23:51:01
-->
<template>
  <a-modal
    :open="visible"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="600"
  >
    <a-form ref="formRef" v-bind="formLayout" :model="model" :rules="rules">
      <a-form-item label="所属资源块" prop="dirName">
        <a-select :disabled="true" v-model:value="model.bucketName">
          <a-select-option
            v-for="item in bucketItems"
            :key="item.id"
            :value="item.id"
            >{{ item.description }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="上级目录" prop="parentId">
        <a-tree-select
          v-model:value="model.parentId"
          :disabled="isEdit"
          :treeData="dirs"
          placeholder="请选择上级目录"
          :fieldNames="{
            children: 'children',
            label: 'description',
            value: 'id',
          }"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="目录名" prop="dirName">
        <a-input v-model:value="model.dirName" :disabled="isEdit"></a-input>
      </a-form-item>
      <a-form-item label="目录说明" prop="description">
        <a-input v-model:value="model.description"></a-input>
      </a-form-item>
      <a-form-item label="目录图标" prop="folderIcon">
        <a-input v-model:value="model.folderIcon"></a-input>
      </a-form-item>
      <a-form-item label="备注" prop="remarks">
        <a-input v-model:value="model.remarks"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { BucketDto, DirResourceDto } from "@/api/resource/types";
import { useFormPage } from "@/helpers/pages";
import { FormInstance } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";

import api from "@/api/resource/dirResource";
import { PopupActionType } from "@/types";
interface DirResourceViewProps {
  id: string;
  visible: boolean;
  action: PopupActionType;
  bucketName: string;
  bucketItems: Array<BucketDto>;
  dirs: Array<DirResourceDto>;
  parentId?: string;
  item?: DirResourceDto;
}

const formRef = ref<FormInstance>();
const emits = defineEmits(["update:visible", "close", "success"]);
const props = withDefaults(defineProps<DirResourceViewProps>(), {
  visible: false,
  action: "create",
});

const { model, rules, formLayout, loading, submitLoading } = useFormPage<
  DirResourceDto,
  string
>({
  rules: {
    id: [{ required: true, message: "资源块名称不允许为空" }],
  },
  model: {
    bucketName: "",
    dirName: "",
    dirPath: "",
    folderIcon: "",
    description: "",
    remarks: "",
  },
});

const isEdit = computed(() => {
  return props.action === "edit";
});

/**
 * 弹窗标题
 */
const title = computed(() => {
  return isEdit.value ? "修改资源目录信息" : "添加资源目录信息";
});

/**
 * 加载数据
 */
const loadData = () => {
  if (isEdit.value) {
    loading.value = true;
    api.get(props.id).then((res) => {
      Object.assign(model, res);
      loading.value = false;
    });
  }
};

/**
 * 提交
 */
const onSubmit = () => {
  emits("success");
  formRef.value.validate().then(() => {
    let request = isEdit.value
      ? api.update(props.id, model)
      : api.create(model);
    submitLoading.value = true;
    request.then((res) => {
      emits("success", res);
      emits("update:visible", false);
      emits("close");
    })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

/**
 * 取消
 */
const onCancel = () => {
  emits("update:visible", false);
  emits("close");
};

watch(
  () => props.visible,
  (val: boolean) => {
    val && loadData();
  },
  { immediate: true }
);

onMounted(() => {
  if (props.action == "edit") {
    return;
  }
  if (props.bucketName) {
    model.bucketName = props.bucketName;
  }
  if (props.parentId) {
    model.parentId = props.parentId;
  }
});
</script>

<style lang="less" scoped></style>
